<template>
	<div class="home">
		<el-container>
			<el-aside
				:style="asideStyle"
			>
				<el-menu
					:default-active="$store.state.activePath"
					:collapse="isCollapse"
					class="el-menu"
					router
				>
					<el-menu-item index="/">
						<i class="el-icon-menu"></i>
						<span slot="title">HOME</span>
					</el-menu-item>
					<el-menu-item index="/works">
						<i class="el-icon-star-on"></i>
						<span slot="title">WORKS</span>
					</el-menu-item>
					<el-menu-item index="/about">
						<i class="el-icon-phone"></i>
						<span slot="title">ABOUT</span>
					</el-menu-item>
				</el-menu>
				<transition name="fade">
					<p class="aside-bottom" v-if="showAuthor">design by 家里一只狗</p>
				</transition>
			</el-aside>
			<el-main>
				<el-scrollbar style="height: 100vh;">
					<i
						:style="iconStyle"
						:class="isCollapse ? 'el-icon-arrow-right toggle-btn' : 'el-icon-arrow-left toggle-btn'"
						@click="clickToggleMenu"
					></i>
				  <transition name="fade" mode="out-in">
						<router-view></router-view>
					</transition>
				</el-scrollbar>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isCollapse: true,
			asideStyle: {
				width: '70px'
			},
			iconStyle: {
				left: '75px'
			},
			showAuthor: false
		}
	},
	mounted() {

	},
	methods: {
		clickToggleMenu() {
			this.isCollapse = !this.isCollapse
			if(this.isCollapse) {
				this.asideStyle = {
					width: '70px',
					alignItems: 'flex-end'
				}
				this.showAuthor = false
				this.iconStyle = {
					left: '75px'
				}
			} else {
				this.asideStyle = {
					width: '200px',
					alignItems: 'center'
				}
				this.showAuthor = true
				this.iconStyle = {
					left: '205px'
				}
			}
		}
	}
}
</script>

<style>
* {
	font-family: "PingFang SC","Helvetica","Tahoma","Arial","Microsoft";
}
body {
	margin: 0;
}
p {
	margin: 0;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scrollbar__bar.is-horizontal {
	height: 0;
}
.el-header {
	background-color: #B3C0D1;
	color: #333;
}
.el-aside {
	position: relative;
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	overflow-x: hidden;
	border-right: 1px solid #ddd;

  transition: all 0.5s ease-out;
}
.el-menu {
	position: absolute;
	left: 0;
	width: 100%;
	border: 0;
}
.el-menu-item {
	height: 100px;
	line-height: 100px;
}
.aside-bottom {
	position: absolute;
	bottom: 20px;
	font-size: 12px;
	color: #666;
	word-wrap: nowrap;
}
.el-main {
	height: 100vh;
	background-color: #E9EEF3;
	color: #333;
	padding: 0;
}
.toggle-btn {
	position: fixed;
	top: 10px;
	cursor: pointer;
  transition: all 0.5s ease-out;
}
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.25s ease-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.25s ease-out;
}
/* fade */
</style>

